<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GO机网管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="css/nifty.min.css" rel="stylesheet">
    <link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../plugins/pace/pace.min.css" rel="stylesheet">
    <link href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
    <style>
        th,td{
            text-align: center;
        }
    </style>
    <script src="../../js/jquery-2.2.1.min.js"></script>

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body id="main">
<div id="container" class="effect mainnav-lg">
    @@include('public/header.html')

    <div class="boxed">
        <div id="content-container">
            <div id="page-title">
                <h1 class="page-header text-overflow">统计</h1>
            </div>
            <!--End page title-->


            <div class="">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label">区域</label>
                        <select class="form-control" id="areaId">
                            <option value="0">全部</option>
                            <option v-bind:value="list.id" v-for="list in areaList" v-text="list.name"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label">师傅</label>
                        <select class="form-control" id="adminId">
                            <option value="0">全部</option>
                            <option v-bind:value="list.admin_id" v-for="list in masterList" v-text="list.name"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label class="control-label">开始日期</label>
                        <input type="text" class="form-control" id="startTime" v-model="startTime">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label class="control-label">结束日期</label>
                        <input type="text" class="form-control" id="endTime" v-model="endTime">
                    </div>
                </div>
                <div class="col-sm-1">
                    <div style="width: 60px">
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label>
                            <button class="btn-default btn form-control" @click="search()">查询</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--Page content-->
            <!--===================================================-->

            <div class="row"></div>
            <div id="page-content">
                <p class="help-block text-danger text-right">* 如未选择查询条件的，默认为今天统计数据</p>
                <div id="page-wrapper">
                    <div class="col-sm-3 eq-box-sm">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">订单量</h3>
                            </div>
                            <div class="panel-body text-center">
                                <h2 v-cloak>{{list.all}}</h2>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-3 eq-box-sm">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">收入金额</h3>
                            </div>
                            <div class="panel-body text-center">
                                <h2 v-cloak>{{list.price}} 元</h2>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-3 eq-box-sm">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">利润金额</h3>
                            </div>
                            <div class="panel-body text-center">
                                <h2>{{list.all_cost}}元</h2>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 eq-box-sm">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">待付款订单</h3>
                            </div>
                            <div class="panel-body text-center">
                                <h2>{{list.status_4}}</h2>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->
            <div class="row"></div>
            <div class="col-sm-12">
                <div>
                    <h3 class="text-center mar-btm">订单状态统计</h3>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>待接单</th>
                            <th>待维修</th>
                            <th>待付款</th>
                            <th>待评价</th>
                            <th>已完成</th>
                            <!--<th>管理员取消</th>-->
                            <!--<th>师傅取消</th>-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td v-text="list.status_2"></td>
                            <td v-text="list.status_3"></td>
                            <td v-text="list.status_4"></td>
                            <td v-text="list.status_5"></td>
                            <td v-text="list.status_6"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <nav id="mainnav-container">
            @@include('public/left_menu.html')
        </nav>
    </div>
</div>
@@include('public/footer.html')
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../../plugins/vue/vue.min.js"></script>
<script src="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    var list = '';
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };


    $("#startTime").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        autoclose: true,
        todayBtn: false,
        language: "zh-CN",
        startDate: '2016-11-06',
        endDate:new Date()
    }).on('changeDate', function(ev){
        var transferdate=transferDate($("#startTime").val());//转时间日期
        $('#endTime').datetimepicker('remove');
        $("#endTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true,
            todayBtn: true,
            language: "zh-CN",
            startDate: transferdate,
            endDate:new Date()
        }).on('hide', function(ev){

        });

    });
    $("#endTime").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        autoclose: true,
        todayBtn: true,
        language: "zh-CN",
        startDate: '2016-11-06',
        endDate:new Date()
    }).on('hide', function(ev){

    });

    //将时间字符串转为date
    function transferDate(data){
        var start_time=data;
        var newTime= start_time.replace(/-/g,"-");
        var transferdate = new Date(newTime);
        return transferdate;
    }

    var vue = new Vue({
        el:"#main",
        data:{
            'startTime':'',
            'endTime':'',
            'page':1,
            'list':'',
            'masterList':{},
            'areaList':{}
        },
        methods:{
            'search':function(){

                var that = this;
                var data = {};
                data.starttime = this.startTime;
                data.endtime = this.endTime;

                if(data.starttime && data.endtime){}else{

                    alert('请补充上时间区间');
                    return false;
                }

                var areaId = $('#areaId').val();
                var adminId = $('#adminId').val();
                if(adminId!=0){
                    data.admin_id = adminId;
                }

                if(areaId!=0){
                    data.area_id = areaId;
                }

                $.post('../../index/admin.php?m=Admin&c=Order&a=OrderStatistics',data,function(res){
                    if(res.code==200){
                        var data = res.data;
                        var all = parseInt(data['status_1']) + parseInt(data['status_2']) + parseInt(data['status_3']) + parseInt(data['status_4']) + parseInt(data['status_5']) + parseInt(data['status_6']);
                        res.data.all = all;
                        that.list = res.data;
                    }else{
                        alert(res.message);
                    }
                },'json');
            },
            'today':function(){
                var that = this;
                var data = {};
                data.starttime = new Date().Format("yyyy-MM-dd");
                $.post('../../index/admin.php?m=Admin&c=Order&a=OrderStatistics',data,function(res){
                    if(res.code==200){
                        var data = res.data;
                        var all = parseInt(data['status_1']) + parseInt(data['status_2']) + parseInt(data['status_3']) + parseInt(data['status_4']) + parseInt(data['status_5']) + parseInt(data['status_6']);
                        res.data.all = all;
                        that.list = res.data;
                    }else{
                        alert(res.message);
                    }
                },'json');
            },
            'initMaster':function(){
                var that = this;
                $.post('../../index/admin.php?m=Admin&c=Admin&a=getServicemanList',{},function(res){
                    if(res.code==200){
                        var data = res.data.list;
                        that.masterList = data;
                    }else{
                        alert(res.message);
                    }
                },'json');
            },
            'initArea':function(){
                var that = this;
                $.post('../../index/admin.php?m=Admin&c=Address&a=getAddress&type=area',{kid:2},function(res){
                    if(res.code==200){
                        var data = res.data;
                        that.areaList = data;
                    }else{
                        alert(res.message);
                    }
                },'json');
            }

        },
        ready:function(){
            this.today();
            this.initMaster();
            this.initArea();
        }
    });




</script>
</body>
</html>
